{% load staticfiles %}
<html>
<head>

<link rel="stylesheet" href="{% static 'recommendation/css/main.css' %}" type="text/css" media="screen, projection" /> <!-- main stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="{% static 'recommendation/css/tipsy.css' %}" /> <!-- Tipsy implementation -->

<script type="text/javascript" src="{% static 'recommendation/js/jquery-1.7.2.min.js' %}"></script>
<script type="text/javascript" src="{% static 'recommendation/js/custom-scripts.js' %}"></script>
<script type="text/javascript" src="{% static 'recommendation/js/jquery.tipsy.js' %}"></script>


<script type="text/javascript">

$(document).ready(function(){
			
	universalPreloader();
						   
});

$(window).load(function(){

	//remove Universal Preloader
	universalPreloaderRemove();
	
	rotate();
    dogRun();
	dogTalk();
	
	//Tipsy implementation
	$('.with-tooltip').tipsy({gravity: $.fn.tipsy.autoNS});
						   
});

</script>


<title>404 - Not found</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>

<!-- Universal preloader -->
<div id="universal-preloader">
    <div class="preloader">
        <img src="{% static 'recommendation/img/universal-preloader.gif' %}" alt="universal-preloader" class="universal-preloader-preloader" />
    </div>
</div>
<!-- Universal preloader -->

<div id="wrapper">
<!-- 404 graphic -->
	<div class="graphic"></div>
<!-- 404 graphic -->
<!-- Not found text -->
	<div class="not-found-text">
    	<h1 class="not-found-text">这个页面丢啦!</h1>
    </div>
<!-- Not found text -->

<!-- search form -->
<div class="search">
	<form name="search" method="get" action="index.html#" />
        <input type="text" name="search" value="Search ..." />
        <input class="with-tooltip" title="Search!" type="submit" name="submit" value="" />
    </form>
</div>
<!-- search form -->

<!-- top menu -->
<div class="top-menu">
	<a href="index.html#" class="with-tooltip" title="Return to the home page">Home</a> | <a href="index.html#" class="with-tooltip" title="Navigate through our sitemap">Sitemap</a> | <a href="index.html#" class="with-tooltip" title="Contact us!">Contact</a> | <a href="index.html#" class="with-tooltip" title="Request additional help">Help</a>
</div>
<!-- top menu -->

<div class="dog-wrapper">
<!-- dog running -->
	<div class="dog"></div>
<!-- dog running -->
	
<!-- dog bubble talking -->
	<div class="dog-bubble">
    	
    </div>
    
    <!-- The dog bubble rotates these -->
    <div class="bubble-options">
    	<p class="dog-bubble">
        	你走丢了嘛, 弟弟? 别担心, 我是个好向导!
        </p>
    	<p class="dog-bubble">
	        <br />
        	溜了! 溜了!
        </p>
        <p class="dog-bubble">
        	<br />
        	我在找路!
        </p>
        <p class="dog-bubble">
        	我想要个小饼干<br /><img style="margin-top:8px" src="{% static 'recommendation/img/cookie.png' %}" alt="cookie" />
        </p>
        <p class="dog-bubble">
        	<br />
        	我的嘛! 这饼干贼好吃!
        </p>
        <p class="dog-bubble">
        	<br />
        	我被关了嘛?
        </p>
        <p class="dog-bubble">
        	我好像在转圈? Nah...
        </p>
        <p class="dog-bubble">
        	<br />
           好吧，我也走丢了...
        </p>
        <p class="dog-bubble">
        	我好像看到一只 <br /><img style="margin-top:8px" src="{% static 'recommendation/img/cat.png' %}" alt="cat" />
        </p>
        <p class="dog-bubble">
        	我们在干啥来着, 什么东西? @_@
        </p>
    </div>
    <!-- The dog bubble rotates these -->
<!-- dog bubble talking -->
</div>

<!-- planet at the bottom -->
	<div class="planet"></div>
<!-- planet at the bottom -->
</div>

</body>
</html>